<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { BroadcastStatus, BroadcastType } from '../types/vtuber';

  const emit = createEventDispatcher();
  //   是否自动播报
  export let isAutoPlay: boolean = false;
  //   是否有继续播报实时解盘的条件
  export let hasContinueBroadcast: boolean = false;
  //   当前播报的类型 实时解盘，诊股，停止
  export let nowBroadcastType: BroadcastType | 'stop' = 'stop';
  //   播报状态 首次进入，自动播放，手动播放
  export let broadcastStatus: BroadcastStatus | void;
  // 首次进入并且未点击按钮的状态
  let firstEnterStatus: boolean = false;
  const stop = () => {
    emit('stop');
  };
  const toggleAutoPlay = () => {
    emit('toggleAutoPlay');
  };
  const playLive = () => {
    emit('playLive');
  };
  $: {
    firstEnterStatus =
      broadcastStatus === BroadcastStatus.IsFirstEnter &&
      nowBroadcastType === BroadcastType.LiveInformation;
  }
</script>

<div class="buttons">
  {#if broadcastStatus === BroadcastStatus.IsFirstEnter}
    {#if isAutoPlay}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="button gray" on:click={toggleAutoPlay}>
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/bd173f10-5bd7-45e4-a8a4-186e9d0eda97.png"
          alt=""
        />关闭自动播报
      </div>
    {:else}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="button gray" on:click={toggleAutoPlay}>
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/e74dbc6a-18cc-4a73-8f95-9fd1da009812.png"
          alt=""
        />开启自动播报
      </div>
    {/if}
    {#if firstEnterStatus}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div
        class="button gray"
        on:click={() => {
          firstEnterStatus = false;
          stop();
        }}
      >
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/1ad169a1-7545-41f7-812c-d9d5a66c3afc.png"
          alt=""
        />退出解盘
      </div>
    {/if}
  {/if}
  {#if !!broadcastStatus && !firstEnterStatus}
    <!-- 暂停状态||（首次进入就诊股） -->
    {#if nowBroadcastType === 'stop' || (nowBroadcastType === BroadcastType.ExaminingStock && !hasContinueBroadcast)}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="button light" on:click={playLive}>
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/19a089ab-0d4e-427d-a317-07dcc86ab9ed.png"
          alt=""
        />实时解盘
      </div>
    {:else if nowBroadcastType === BroadcastType.ExaminingStock && hasContinueBroadcast}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="button light" on:click={playLive}>
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/55b447e7-105f-4ba1-831b-573d0ba6f59e.png"
          alt=""
        />继续解盘
      </div>
    {:else if nowBroadcastType === BroadcastType.LiveInformation}
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div class="button gray" on:click={stop}>
        <img
          src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/1ad169a1-7545-41f7-812c-d9d5a66c3afc.png"
          alt=""
        />退出解盘
      </div>
    {/if}
  {/if}
</div>

<style lang="less">
  .buttons {
    display: flex;
    height: 28px;
    .button {
      display: flex;
      align-items: center;
      height: 28px;
      border-radius: 2px;
      padding: 4px 8px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: justify;
      font-weight: 400;
      box-sizing: border-box;
      cursor: pointer;
      margin-right: 8px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .light {
      background: #0d4e96;
    }
    .gray {
      background: rgba(255, 255, 255, 0.2);
    }
  }
</style>
